<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div class="work-index">
    <ul class="work-nav">
      <li v-for="item in nav">
        <router-link :to="{path: '/work/info/' + item.id}">
          <img v-bind:src="item.icon">
        </router-link>
      </li>
    </ul>
    <div>
      <tab :line-width=2 active-color='#6699ff' v-model="index">
        <tab-item class="vux-center" :selected="tabIn === item" v-for="(item, index) in list"
                  :key="index">{{item}}
        </tab-item>
      </tab>
      <swiper v-model="index" :show-dots="false" @on-index-change="setIndex" ref="swiper">
        <swiper-item v-for="(item, index) in list" :key="index">
          <grid :cols="4" v-if="index !== 2">
            <grid-item v-for="(icon, i) in guides[index]" :key="i" class="grid-img" v-bind:label="icon.head" :link="{path: '/work/list/' + icon.id}">
              <img slot="icon" v-bind:src="'https://ydt.xy12345.cn/edot/images/icon/'+icon.regionName">
            </grid-item>
          </grid>
          <grid :cols="2" v-else>
            <grid-item v-for="(icon, i) in guides[index]" :key="i" class="grid-text" v-bind:label="icon.head" :link="{path: '/work/list/' + icon.id}">
            </grid-item>
          </grid>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script>
  import Tab from 'vux/src/components/tab/tab'
  import TabItem from 'vux/src/components/tab/tab-item'
  import { Swiper, SwiperItem } from 'vux/src/components/swiper'
  import { Grid, GridItem } from 'vux/src/components/grid'

  export default {
    components: {
      Grid,
      GridItem,
      Swiper,
      SwiperItem,
      Tab,
      TabItem
    },
    methods: {
      setIndex (index) {
        this.index = index
        this.getGuides()
      },
      getGuides () {
        let url = 'https://ydt.xy12345.cn/edot/work/guide/selectGuides'
        let param = {
          type: this.type[this.index],
          pageIndex: 1,
          pageSize: 100
        }
        // 判断是否为首次加载tab子项
        if (this.guides[this.index].length === 0) {
          this.$vux.loading.show({
            text: 'Loading'
          })
          this.$axios.post(url, this.$qs.stringify(param)).then(response => {
            let results = response.data.data.results
            // 根据数据长度改变tab子项高度
            if (this.index !== 2) {
              this.swiperHeight = Math.ceil(results.length / 4) * 22 + 'vw'
            } else {
              this.swiperHeight = Math.ceil(results.length / 2) * 10 + 'vw'
            }
            this.$nextTick(() => {
              this.$refs.swiper.xheight = this.swiperHeight
            })
            this.$set(this.guides, this.index, results)
            this.$vux.loading.hide()
          })
        } else {
          // 根据数据长度改变tab子项高度
          if (this.index !== 2) {
            this.swiperHeight = Math.ceil(this.guides[this.index].length / 4) * 22 + 'vw'
          } else {
            this.swiperHeight = Math.ceil(this.guides[this.index].length / 2) * 10 + 'vw'
          }
          this.$nextTick(() => {
            this.$refs.swiper.xheight = this.swiperHeight
          })
        }
      }
    },
    data () {
      return {
        // 上部四张图片数据
        nav: [
          {
            icon: 'static/img/work/w_nav_1.png',
            id: '610400000000GA000-XK-0042'
          },
          {
            icon: 'static/img/work/w_nav_2.png',
            id: '610400000000MZ000-FW-0005'
          },
          {
            icon: 'static/img/work/w_nav_3.png',
            id: '610400000000ZJ100-QR-0021'
          },
          {
            icon: 'static/img/work/w_nav_4.png',
            id: '610400000000RS000-FW-0005'
          }
        ],
        index: 0,
        tabIn: '个人办事',
        list: ['个人办事', '企业办事', '部门办事'],
        type: ['001', '002', '003'],
        guides: [[], [], []],
        swiperHeight: '100vw'
      }
    },
    mounted () {
      this.$store.commit('updataTitleStatus', '办事')
      this.getGuides()
    }
  }
</script>

<style scoped>
  .work-index{
    background-color: #f5f5f5;
  }

  .work-nav {
    padding: 2vw 0;
    margin: 2vw 0;
    width: 100vw;
    background-color: #fff;
    overflow: hidden;
  }

  .work-nav li {
    float: left;
    width: 50vw;
  }

  .work-nav li img {
    width: 50vw;
  }

  .tab-swiper {
    background-color: #fff;
    overflow: hidden;
  }

  .vux-slider{
    background-color: #fff;
    margin-top: 2vw;
  }

  .grid-img {
    width: 25%;
    padding: 0;
    height: 22vw;
  }

  .weui-grid__icon {
    width: 50% !important;
    height: 50% !important;
    margin: 0 auto;
  }

  .grid-text {
    width: 50%;
    height: 10vw;
    line-height: 10vw;
    padding: 0;
    text-align: center;
  }

  .grid-center {
    width: 50%;
  }
</style>
